﻿<pages:MainPage
    x:Class="TheVerge.Phone.Pages.SectionsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:con="clr-namespace:TheVerge.Phone.Controls"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:pages="clr-namespace:TheVerge.Phone.Pages"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    shell:SystemTray.IsVisible="True">

    <Grid Background="{StaticResource PhoneBackgroundBrush}" Margin="-1">
        <Grid.Resources>
            <pages:BackgroundColorConverter x:Key="bkgrconv" HasItemsColor="{StaticResource PhoneAccentBrush}" NoItemsColor="{StaticResource PhoneChromeBrush}" />
            <DataTemplate x:Key="dtSections">
                <Button Style="{StaticResource clearButtonStyle}" Click="Section_Click" HorizontalContentAlignment="Left" Padding="12">
                    <TextBlock Text="{Binding}" Style="{StaticResource PhoneTextTitle2Style}" />
                </Button>
            </DataTemplate>

            <DataTemplate x:Key="LongListGroupHeader">
                <Grid Margin="12,0,0,0">
                    <Grid Width="75" Height="75" HorizontalAlignment="Left">
                        <TextBlock Margin="12,0,1,7" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}" Text="{Binding Title}" VerticalAlignment="Bottom"/>
                        <Border BorderThickness="1" BorderBrush="{StaticResource PhoneAccentBrush}" />
                    </Grid>
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="LongListGroupItemTemplate">
                <Border Background="{Binding HasItems, Converter={StaticResource bkgrconv}}" Width="99" Height="99" Margin="6" IsHitTestVisible="{Binding HasItems}">
                    <TextBlock Text="{Binding Title}"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                   FontSize="36"
                                   Margin="{StaticResource PhoneTouchTargetOverhang}"
                                   Foreground="{StaticResource PhoneForegroundBrush}"
                                   VerticalAlignment="Bottom"/>
                </Border>
            </DataTemplate>
        </Grid.Resources>
        <con:HeaderControl />

        <controls:Pivot x:Name="thePiv" SelectionChanged="thePiv_SelectionChanged" 
                        HeaderTemplate="{StaticResource headerTemplate}"
                        TitleTemplate="{StaticResource PivotTitleTemplate}">

            <controls:PivotItem Header="hubs" DataContext="{Binding Hubs}">
                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <StackPanel Orientation="Vertical">
                        <toolkit:PerformanceProgressBar Margin="6" IsIndeterminate="{Binding IsLoading}" />
                        <ItemsControl ItemsSource="{Binding All}" ItemTemplate="{StaticResource dtSections}" />
                    </StackPanel>
                </ScrollViewer>
            </controls:PivotItem>

            <controls:PivotItem Header="brands" DataContext="{Binding Brands}">
                <toolkit:LongListSelector x:Name="lstMain" ItemsSource="{Binding BrandGroups}"
                                          GroupHeaderTemplate="{StaticResource LongListGroupHeader}" 
                                          GroupItemTemplate="{StaticResource LongListGroupItemTemplate}"
                                          ItemTemplate="{StaticResource dtSections}" >
                    <toolkit:LongListSelector.GroupItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel />
                        </ItemsPanelTemplate>
                    </toolkit:LongListSelector.GroupItemsPanel>
                </toolkit:LongListSelector>
            </controls:PivotItem>
           
            <controls:PivotItem Header="categories" DataContext="{Binding Categories}">
                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <StackPanel Orientation="Vertical">
                        <toolkit:PerformanceProgressBar Margin="6" IsIndeterminate="{Binding IsLoading}" />
                        <ItemsControl ItemsSource="{Binding All}" ItemTemplate="{StaticResource dtSections}" />
                    </StackPanel>
                </ScrollViewer>
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>

</pages:MainPage>